<template>
  <div class="collect" v-loading="loading">
    <Nav
      :activeNav="searchInfo.sourceType"
      :navList="navList"
      @clickNav="handleClickNav"
    />
    <div class="c-main" v-if="List.length">
      <div class="flex" v-for="item in List" :key="item.id">
        <img class="img" src="@/assets/img/personal/bookmark.svg" alt="" />
        <p class="tit flex-auto ellipsis-1" @click="gotoDetail(item)">
          {{ item.title }}
        </p>
        <p class="date">{{ item.createTime }}</p>
        <el-tooltip content="取消收藏" placement="top">
          <i class="rate el-icon-star-on" @click="handleRate(item)"></i>
        </el-tooltip>
      </div>
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :current-page.sync="searchInfo.page"
      >
      </el-pagination>
    </div>
    <div class="no-data" v-else>
      <p>暂无数据！</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      navList: [
        {
          label: "资讯",
          type: "NEWS",
        },
        {
          label: "企业",
          type: "COMPANY",
        },
        {
          label: "人才",
          type: "PEOPLE",
        },
        {
          label: "专利",
          type: "PATENT",
        },
        {
          label: "论文",
          type: "PAPER",
        },
        {
          label: "成果",
          type: "ACHIEVEMENT",
        },
        {
          label: "标准",
          type: "STANDARD",
        },
      ],
      List: [],
      searchInfo: {
        sourceType: "NEWS",
        page: 1,
        limit: 10,
      },
      total: 0,
    };
  },
  methods: {
    handleClickNav(item) {
      this.searchInfo.sourceType = item.type;
      this.searchInfo.page = 1;
      this.search();
    },
    handleRate(item) {
      this.$confirm("您确定取消收藏吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.$delete(
          `${this.$Url.collect.collectionDelete}/${item.id}`,
          {}
        ).then((res) => {
          this.$message({
            type: "success",
            message: "取消成功！",
          });
          this.search();
        });
      });
    },
    handleCurrentChange(val) {
      // console.log("val1", val);
      this.searchInfo.page = val;
      this.search();
    },
    search() {
      this.loading = true;
      this.$get(this.$Url.collect.collectionPage, this.searchInfo)
        .then((res) => {
          this.loading = false;
          const data = res.data;
          this.total = data.total;
          this.List = data.list;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    gotoDetail(item) {
      let st = this.searchInfo.sourceType,
        name = "",
        query = {};
      if (st == "NEWS") {
        name = "ConsultDetail";
      } else if (st == "PEOPLE") {
        name = "";
        // TODO
      } else if (st == "PATENT") {
        name = "DataCenterDetail";
        query = {
          type: st.toLowerCase(),
          left: false,
        };
      } else if (st == "PAPER") {
        name = "DataCenterDetail";
        query = {
          type: st.toLowerCase(),
          left: false,
        };
      } else if (st == "ACHIEVEMENT") {
        name = "DataCenterDetail";
        query = {
          type: "achieve",
          left: false,
        };
      } else if (st == "STANDARD") {
        name = "DataCenterDetail";
        query = {
          type: st.toLowerCase(),
          left: false,
        };
      }
      if (st == "COMPANY") {
        this.$Bus.$emit("progressBar", item.title);
        return;
      }
      if (!item.sourceId) {
        this.$message({
          type: "error",
          message: "数据缺少sourceId！",
        });
        return;
      }
      let routerUrl = this.$router.resolve({
        name: name,
        query: {
          id: item.sourceId,
          ...query,
        },
      });
      window.open(routerUrl.href, "_blank");
    },
  },
  created() {
    this.search();
  },
  mounted() {
    //
  },
  components: {
    Nav: () => import("../components/nav.vue"),
  },
};
</script>
<style lang="scss" scoped>
.collect {
  .flex {
    align-items: center;
  }
  .c-main {
    margin: 20px 0;
    .flex {
      margin-bottom: 20px;
    }
    .img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    .tit {
      cursor: pointer;
    }
    .date {
      width: 150px;
    }
    .rate {
      // width: 30px;
      font-size: 24px;
      color: $color120;
      cursor: pointer;
    }
  }
}
</style>
